<template>
  <div class="cityList">
    <div class="cityList_buttons">
      现已开通 {{ openCityNum }} 个城市
      <Button type="primary" @click="cityAdd" v-if="unlocking('0204010100')">新增城市</Button>
    </div>
    <Table ref="TableHeight" class="table" :max-height="onresizeHeight" :columns="columns1"
      :data="data1" @on-row-click="toEdit"></Table>
    <!-- 分页 -->
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount">
        当前第 {{ pageData.pages }} 页， 当前第
        {{ (pageData.pages - 1) * pageData.rows + 1 }} 条到第
        {{
          pageData.pages * pageData.rows > pageData.total
            ? pageData.total
            : pageData.pages * pageData.rows
        }}
        条， 共 {{ pageData.total }} 条
      </div>
      <Page :current="pageData.pages" placement="top" :page-size-opts="pageData.pageSizeOpts"
        @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun"
        show-elevator show-sizer />
    </div>
    <!-- table 头部筛选 -->
    <!-- <table_filter :options="options" @cancelFilterFun="cancelFilterFun" @okFilterFun="okFilterFun"></table_filter> -->
    <!-- 审核弹窗 -->
    <Modal v-model="checkMoudle" title="新增城市" footer-hide width="600px">
      <div>
        <Form ref="formValidate" :model="formValidate" :label-width="100">
          <FormItem label="省/城市：" prop="provinceCode">
            <Select v-model="formValidate.provinceCode" filterable clearable remote
              placeholder="请选择省份" style="width: 200px; marginright: 10px"
              @on-change="getAreacode(3, formValidate.provinceCode, 'cityList')">
              <Option v-for="(option, index) in provinceList" :value="option.cityCode"
                :key="index">{{ option.cityName }}</Option>
            </Select>
            <Select v-model="formValidate.cityCode" filterable remote placeholder="请选择城市"
              style="width: 200px">
              <Option v-for="(option, index) in cityList" :value="option.cityCode"
                :key="index">{{ option.cityName }}</Option>
            </Select>
          </FormItem>
          <FormItem label="开发平台：" prop="result">
            <Checkbox v-model="formValidate.bappStatus">B-APP</Checkbox>
            <Checkbox v-model="formValidate.cappStatus">C-APP</Checkbox>
            <Checkbox v-model="formValidate.pcStatus">C-PC</Checkbox>
            <Checkbox v-model="formValidate.mstationStatus">C-M站</Checkbox>
            <Checkbox v-model="formValidate.wechatStatus">C-小程序</Checkbox>
          </FormItem>
          <FormItem class="cityList_moudle_footer">
            <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>
<script>
  import generalConfiguration from '@/biz/generalConfiguration/generalConfiguration'

  export default {
    data() {
      const ruleValidateName = (rule, data, callback) => {
        if (!data || data.length > 15)
          return callback('请输入不超过15个字符长度的部门名称')
        callback()
      }
      return {
        openCityNum: 0,
        onresizeHeight: 0,
        pageData: {
          total: 0,
          pages: 1,
          rows: 10,
          pageSizeOpts: [10, 30, 40, 50],
        },
        provinceList: [],
        cityList: [],
        columns1: [
        {
          title: '城市',
          key: 'cityName',
          minWidth: 90,
          align: 'center',
        },
        {
          title: '开放平台',
          key: 'clientType',
          align: 'center',
          render: (h, params) => {
            return h('div', this.openPlatform(params.row))
          },
        },
        {
          title: '板块标签数量',
          key: 'tcount',
          align: 'center',
        },
        {
          title: '地铁数量',
          key: 'mcount',
          align: 'center',
        },
        {
          title: '更多',
          align: 'center',
          key: 'tagsCount',
          minWidth: 200,
        },
        {
          title: '操作',
          key: 'address',
          fixed: 'right',
          width: 100,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'text',
                    disabled: !this.unlocking('0204010200'),
                  },
                  style: {
                    color: this.unlocking('0204010200') ? '#02b0f0' : '#c5c8ce',
                  },
                  on: {
                    click: () => {
                      this.unlocking('0204010200') && this.toEdit(params.row)
                    },
                  },
                },
                '编辑'
              ),
            ])
          },
        }, ],
        data1: [],
        formValidate: {
          provinceCode: '',
          cityCode: '',
          bappStatus: false,
          cappStatus: false,
          pcStatus: false,
          wechatStatus: false,
          mstationStatus: false,
        },
        propertyLogState: false,
        logData: {},
        checkMoudle: false,
      }
    },
    methods: {
      //开始新建
      cityAdd() {
        this.formValidate = JSON.parse(JSON.stringify(this.initFrom))
        this.checkMoudle = true
      },
      //点击新增城市按钮
      handleSubmit(name) {
        let {
          provinceCode,
          cityCode,
          bappStatus,
          cappStatus,
          pcStatus,
          wechatStatus,
          mstationStatus,
        } = this.formValidate
        if (!provinceCode || !cityCode)
          return this.$Message.error('请选择省份和城市')
        let params = {
          provinceCode,
          cityCode,
          bappStatus: bappStatus ? '1' : '2',
          pcStatus: pcStatus ? '1' : '2',
          cappStatus: cappStatus ? '1' : '2',
          wechatStatus: wechatStatus ? '1' : '2',
          mstationStatus: mstationStatus ? '1' : '2',
        }
        generalConfiguration.
        onlineCityAdd(params)
          .then((res) => {
            console.log('添加城市成功')
            this.$Message.success('添加城市成功')
            this.checkMoudle = false
            this.$refs[name].resetFields()
            this.getList()
          })
          .catch((err) => {
            this.$Message.error('添加失败: 原因: ' + err)
          })
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        console.log('pageOnChangeFun', page)
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(page) {
        console.log('pageOnPageSizeChangeFun', page)
      },
      // 初始化获取数据
      initData() {
        this.$nextTick(() => {
          this.onresizeHeight =
            window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100
        })
        this.getList()
        this.getAreacode(2, '', 'provinceList')
        this.initFrom = JSON.parse(JSON.stringify(this.formValidate))
        console.log(11, this.initFrom)
      },
      getList() {
        generalConfiguration.
        onlineCityList({ level: 3 }).then((res) => {
          this.data1 = res.list
          this.openCityNum = res.total
          console.log('开发城市列表', res)
        })
      },
      //转变物业类型
      propertyTypeChange(mess) {
        let list = mess.split(','),
          newArray = []
        list.map((item) => {
          newArray.push(this.$formatter.switchName('propertyType', item))
        })
        return newArray.toString()
      },
      //循环平台
      openPlatform(mess) {
        let openMess = {
            bappStatus: 'B-APP',
            cappStatus: 'C-APP',
            mstationStatus: 'C-M站',
            pcStatus: 'C-PC',
            wechatStatus: 'C-小程序',
          },
          str = []
        Object.keys(openMess).map((item) => {
          if (mess[item] == 1) str.push(openMess[item])
        })
        if (str.length > 0) return str.join(',')
        else return '不开放'
      },
      //获取城市列表
      getAreacode(level = 2, num, name) {
        console.log('发生了请求', num)
        if (level != 2 && !num) return
        //层级(1:国 2:省 3:市 4:区)
        let params = { level, parentCode: num, page: 1, rows: 100 }
        generalConfiguration.cityList(params).then((res) => {
          this[name] = res.list
          console.log('获取列表城市', res)
        })
      },
      //关闭日志弹窗
      closePopup() {
        this.logData = {}
        this.propertyLogState = false
      },
      //查看日志
      goLog(mess) {
        this.logData = mess
        this.propertyLogState = true
      },
      //编辑
      toEdit(mess) {
        let {
          cityName,
          cityCode,
          onlineCityId,
          bappStatus,
          cappStatus,
          pcStatus,
          mstationStatus,
          wechatStatus,
          cityId,
        } = mess,
        arr = [bappStatus, cappStatus, pcStatus, mstationStatus, wechatStatus],
          arr1 = []
        arr.map((item, index) => item == 1 && arr1.push(index))
        this.$router.push({
          path: '/backStage/cityConfigure/cityConfigurationDetail',
          query: {
            title: cityName,
            onlineCityId: onlineCityId,
            status: arr1.join('~'),
            code: cityCode,
            cityId,
          },
        })
      },
      // 查看详情
      // viewClick(val) {
      //    //this.editEmployee = true;
      //    //this.editEmployeeMess = val;
      //    this.$router.push({
      //        path:"/system_center/roleControl/roleControling",
      //        name: 'roleControling',
      //        params:{
      //          id:5
      //        }
      //    })
      // },
      //编辑点击确定
      editEmployeeSure(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log('成功')
            //调取变更部门接口
            //this.$refs[name].resetFields();
          }
        })
      },
      //开启禁用人员确定按钮
      deleEmployeeSure(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log('成功')
            this.deleEmployee = false
            //调取变更部门接口
            //this.$refs[name].resetFields();
          }
        })
      },
      //开启禁用人员
      openAuthority(mess) {
        //调取权限接口
        console.log('调取权限接口')
      },
    },
    computed: {},
    created() {
      // 初始化获取数据
      console.log('测试111111')
      this.initData()
    },
    activated() {},
    deactivated() {},
    mounted() {
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight =
              window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 150
          }, 10)
        })()
      }
    },
    watch: {
      chengeNameStatus(newValue) {
        console.log('chengeNameStatus', newValue)
        // newValue != 'checkWait' && this.getBuildingInfoList() && this.agianHeight()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .cityList {
    height: calc(100% - 20px);
    padding: 20px;

    .allCustomersP {
      padding: 8px 14px;
    }

    &_moudle_select {
      width: 202px;
      margin-right: 10px;
    }

    &_moudle_footer {
      margin-right: 0px;
      text-align: right;
    }

    &_buttons {
      text-align: left;
      padding: 0px 0 20px 0;
    }

    ::v-deep .ivu-table-wrapper {
      // height: 100%;
    }

    ::v-deep .ivu-table th {
      background-color: #f6f8fa;
    }

    ::v-deep .ivu-form-item {
      margin-bottom: 12px;
    }
  }

  /* page */
  .pagePublicStyle {
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }

  .totalCount {
    float: left;
    line-height: 34px;
    padding-left: 20px;
  }

  .table {
    .ivu-modal-header {
      border-bottom: 1px solid #e8eaec;
      padding: 14px 16px;
      line-height: 1;
    }

    th .ivu-table-cell-with-selection {
      position: relative;
    }

    th .ivu-table-cell-with-selection::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #f8f8f9;
      z-index: 99;
    }

    ::v-deep .ivu-checkbox-wrapper {
      margin-right: 20px;
      font-size: 16px;
    }
  }
</style>